<template>
   <div class="contact-paln" v-loading="loading" v-if="refresh==='plan'&&!loading">
     <!-- 已完成联系计划 -->
    <affix :label="$t('customer.contactPlan.finishedContactPlan')" class="create-cp" v-show="isFinishedPlanShow">
      <finished-contact-plan
      :executorNew="executorNew"
      :planTime="planTime"
      :planContent="planContent"
      :isFinishedPlanShow="isFinishedPlanShow"
      @cancel="cancelDeal">
      </finished-contact-plan>
    </affix>

      <!-- 新建，编辑联系计划 -->
      <affix :label="editTitle" class="create-cp" v-if="isEditShow">
        <add-contact-plan
        @submit="submitForm"
        @update="update"
        :initForm="initForm"
        :editType="editType">
        </add-contact-plan>
      </affix>
      <!-- 联系计划 -->
      <affix :label="title" class="create-cp" v-show="isCurrentPlanShow">
        <update-contact-plan
        @edit="edit"
        @deal="deal"
        :executorNew="executorNew"
        :planTime="planTime"
        :planContent="planContent"
        :isCurrentPlanShow="isCurrentPlanShow"
        ></update-contact-plan>
      </affix>
      <!-- 联系计划历史 -->
     <affix :label="$t('customer.contactPlan.contactPlanHistory')" class="history-cp">
      <show-contact-plan-history
      :linkPlan="linkPlan"
      :cid="cid"
      ref="showContactPlanHistory"
      :isLoadMoreShow="isLoadMoreShow"
      @load-more="loadMore">
      </show-contact-plan-history>
     </affix>
    </div>
</template>
<script>
  import Affix from '@/components/ui-modules/affix/Affix.vue'
  import ShowContactPlanHistory from './ShowContactPlanHistory'
  import FinishedContactPlan from './FinishedContactPlan'
  import AddContactPlan from './AddContactPlan'
  import UpdateContactPlan from './UpdateContactPlan'
  import plan from './plan.js'
  export default {
    name: 'ContactPlan',
    mixins: [plan],
    components: {
      Affix,
      ShowContactPlanHistory,
      FinishedContactPlan,
      AddContactPlan,
      UpdateContactPlan
    }
  }
</script>
<style lang="stylus" scoped>
@import '../../../../assets/common.styl'
  .con
    display flex
    p
      flex 1
      font-size 12px
      color $cf-gray0
      margin 0 0 0 28px
      font-size 12px
      vertical-align top
    .deal
      text-decoration line-through
      margin-left 0
      color $cf-gray4
    span
      color $c-main
      width 120px
      text-align right
      font-size 12px
      cursor pointer
  .time
    line-height 20px
    text-align center
    display inline-block
    margin-left 3px
    color $cf-gray4
  .fini
    color $cf-gray5
  strong
    display inline-block
    width 22px
    height 22px
    position relative
    top 7px
    cursor pointer
    .iconfont
      font-size 18px
      color $c-main
  .create-cp
    margin-bottom 0px
    .el-form-item
      color #c1c1c1
      margin-bottom 8px
      &:last-child
        margin-bottom 0px
    .el-button
      width 90px
      float right
      padding 8px 0
      font-size 12px
  .history-cp
    .h-cp-content
      &:before
        content ""
        clear both
      li
        margin-top 12px
        color $cf-level1
        display flex
        .name1
          color $c-main
          margin 0 10px
        .date
          margin 0 12px
        .plan_content
          display inline-block
          flex 1
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
          vertical-align top
      .first
        margin-top 0
  .btn
    cursor pointer
    margin 0 auto
    width 130px
    color $cf-white
    text-align center
    background-color $c-main
    line-height 30px
    height 30px
    border-radius 5px
    .icon-shuaxin
      display inline-block
      span
        font-size 12px
        float right
        padding-left 5px
  .next-page
    margin-top 20px
  .create-cp__finish
    margin-bottom 0
</style>
